<template>
  <section>
    <van-sticky>
      <PageHeader title="我的访客" />
    </van-sticky>

    <van-tabs v-model="type" @change="onTabChanged" scrollspy sticky>
      <van-tab title="我访问的" name="my">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="requestData"
          v-if="type=='my'">
          <div class="member-list">
            <router-link
              :to="{ name: 'MemberProfile', query: { id: item.member.id }}"
              v-for="(item, index) in dataList"
              :key="index">
              <div class="flex flex-row flex-centerV bg-color-white pd10 mt10 member-item">
                <div class="flex flex-row flex-center pr10">
                  <img :src="item.member.photo_url ? item.member.photo_url : STATIC_BASE_URL + '/images/mp/gender.png'" class="avatar" />
                </div>

                <div class="flex flex-col flex-1 font-common">
                  <h3>{{item.user.nick}}</h3>
                  <div class="text-left"><span v-if="item.member.birthday>0">{{item.member.age}}岁</span><span v-if="item.member.live_city_str"> · {{item.member.live_city_str}}</span><span v-if="item.member.height>0"> · {{item.member.height}}cm</span></div>
                  <div class="text-left" v-if="item.member.house_status>0 || item.member.car_status>0 || item.member.job>0"><span v-if="item.member.house_status==20" class="mr5">有房</span><span v-if="item.member.car_status==20" class="mr5">有车</span><span v-if="item.member.job>0" class="mr5">{{item.member.job_str}}</span></div>
                </div>
              </div>
            </router-link>
          </div>
        </van-list>
      </van-tab>

      <van-tab title="访问我的" name="others">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="requestData"
          v-if="type=='others'">
          <div class="member-list">
            <router-link
              :to="{ name: 'MemberProfile', query: { id: item.member.id }}"
              v-for="(item, index) in dataList"
              :key="index">
              <div class="flex flex-row flex-centerV bg-color-white pd10 mt10 member-item">
                <div class="flex flex-row flex-center pr10">
                  <img :src="item.member.photo_url ? item.member.photo_url : STATIC_BASE_URL + '/images/mp/gender.png'" class="avatar" />
                </div>

                <div class="flex flex-col flex-1 font-common">
                  <h3>{{item.user.nick}}</h3>
                  <div class="text-left"><span v-if="item.member.birthday>0">{{item.member.age}}岁</span><span v-if="item.member.live_city_str"> · {{item.member.live_city_str}}</span><span v-if="item.member.height>0"> · {{item.member.height}}cm</span></div>
                  <div class="text-left pt5" v-if="item.member.house_status>0 || item.member.car_status>0 || item.member.job>0"><span v-if="item.member.house_status==20" class="mr5">有房</span><span v-if="item.member.car_status==20" class="mr5">有车</span><span v-if="item.member.job>0" class="mr5">{{item.member.job_str}}</span></div>
                </div>
              </div>
            </router-link>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </section>
</template>

<script>
  import Vue from 'vue';
  import {Tab, Tabs, Toast, Sticky} from 'vant';
  import {visitorListsUri, STATIC_BASE_URL} from "../../../common/api";
  import PageHeader from "../../componets/PageHeader";

  Vue.use(Tab).use(Tabs).use(Toast).use(Sticky);

  export default {
    components: {
      PageHeader
    },
    data() {
      return {
        type: 'my',
        STATIC_BASE_URL: STATIC_BASE_URL,
        currentPage: 1,
        lastPage: 0,
        total: 0,
        pageSize: 10,
        loading: false,
        finished: false,
        dataList: [],
      }
    },
    methods: {
      onTabChanged(name, title) {
        this.currentPage = 1;
        this.lastPage = 0;
        this.total = 0;
        this.loading = false;
        this.finished = false;
        this.dataList = [];
        this.requestData();
      },
      requestData() {
        const that = this;
        this.loading = true;
        const url = visitorListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage + '&type=' + this.type;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.loading = false;
            if (that.currentPage >= data.last_page) {
              that.finished = true;
            }
            that.currentPage = that.currentPage + 1;
            for (let i = 0; i < data.data.length; i++) {
              that.dataList.push(data.data[i]);
            }
            that.total = data.total;
            that.lastPage = data.last_page;
          }
        }, response => {
          // error callback
        })
      },
    },
    mounted: function () {

    }
  }
</script>

<style scoped>
  .member-list a {
    color: #3d3d3d;
  }
  .member-item .avatar {
    height: 60px;
    width: 60px;
    border-radius: 30px;
  }
</style>
